<template>
  <div ref="chartContainer" style="width: 100%; height: 350px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'CustomerSatisfactionChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.chartContainer);

      // 模拟数据
      const months = [
        '2024年01月', '2024年02月', '2024年03月', '2024年04月', '2024年05月',
        '2024年06月', '2024年07月', '2024年08月', '2024年09月', '2024年10月',
        '2024年11月', '2024年12月'
      ];
      const data = [1860000, 2102000, 3715000, 3618000, 4322000, 5525000, 7730000, 7835000, 7840000, 8945000, 6950000, 855000];

      let option = {
        // 这里可根据需求决定是否保留标题相关配置，先注释掉原有的
        title: {
          text: '采购入库单据数量',
          left: '3%',
          textStyle: {
            color: '#333',
            fontSize: 16,
            right: 20,
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // legend（图例）部分的配置用于控制图表中图例相关的展示效果和样式等
          data: ['Last Month'], // 只保留 Last Month 部分
          right: '10%',
          textStyle: {
            color: '#333'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          // top: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: months, // 修改为 2024 年各月的数据
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['#eee']
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        series: [
          {
            name: 'Last Month',
            type: 'line',
            smooth: true,
            smoothMonotone: 'x',  // 添加这一行，调整平滑曲线单调性
            stack: 'Total',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#67B9E5' },
                { offset: 1, color: '#CDEAFD' }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: data // 使用模拟的Y轴数据
          }
        ]
      };

      myChart.setOption(option);

      // 使图表随窗口大小自动调整
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
/* 可选：为图表容器添加一些样式 */
.chart-container {
  width: 100%;
  height: 350px;
}
</style>